<template>
  <card class="insure-card" title="车辆信息">
    <car-info-block :carInfo="carInfo" :fieldList="fieldList" :tags="[record.statusName]" />
  </card>
  <card class="add-info-card" title="">
    <div class="section-item gray">
      <div class="section-item-content">
        <a-descriptions :size="size" :align="{ label: 'right' }">
          <a-descriptions-item label="借调类型">{{ record.typeName }}</a-descriptions-item>
          <a-descriptions-item label="关联订单号">{{ record.refCode }}</a-descriptions-item>
          <a-descriptions-item label="借调周期">{{ record.startTime }} - {{ record.endTime }}</a-descriptions-item>
          <a-descriptions-item label="租期">{{ record.rentDays }}</a-descriptions-item>
          <a-descriptions-item label="借调费">{{ record.amount ?? '-' }}元</a-descriptions-item>
          <a-descriptions-item label="借调附加费">{{ record.additionalAmount ?? '-' }}元</a-descriptions-item>
          <a-descriptions-item>
            <template #label>
              <span>费用金额</span>
              <a-tooltip content="借调单下收款 - 付款的金额" position="top">
                <icon-exclamation-circle class="icon-tip" />
              </a-tooltip>
            </template>
            {{ record.totalAmount ?? '-' }}元
          </a-descriptions-item>
          <a-descriptions-item label="收款账号">
            {{ record.contractCarPurchaseEditVo && record.contractCarPurchaseEditVo.receiveAccount }}
          </a-descriptions-item>
        </a-descriptions>
      </div>
    </div>
  </card>
</template>

<script setup>
  import { getCarTransferDetail } from '@/api/asset/carTransfer'
  import { onMounted, ref } from 'vue'
  import { useRoute } from 'vue-router'
  const route = useRoute()
  const size = ref('medium')
  const routePrams = route.query
  console.log(routePrams)
  const fieldList = ref([
    { label: '归属门店', prop: 'siteName' },
    { label: '归属车场', prop: 'siteCarPark' },
  ])

  const record = ref({
    feeList: [],
    contractCarPurchaseEditVo: {},
  })

  // 获取车辆详情
  const carInfo = ref({})
  const getDetail = (id) => {
    getCarTransferDetail({ id: id }).then((res) => {
      const result = res.result
      carInfo.value = { ...result, modelName: result.modelName }
      record.value = result
    })
  }

  onMounted(() => {
    const id = routePrams.id
    if (id) {
      console.log(id)
      getDetail(id)
    }
  })
</script>

<style lang="less" scoped>
  .car-msg {
    width: 100%;
    padding: 20px;
    background-color: #f7f8fa;
    .car-lic {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      div:nth-child(1) {
        color: #1d2129;
        font-size: 20px;
        font-weight: 600;
      }
      div:nth-child(2) {
        color: #e45800;
        font-size: 14px;
        font-weight: 400;
        padding: 4px 10px;
        background-color: #fff9e8;
        margin-left: 12px;
      }
    }
    .car-name {
      color: #1d2129;
      font-size: 14px;
      margin: 16px 0;
    }
    .car-other {
      color: #1d2129;
      font-size: 14px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: wrap;
      div {
        margin-right: 56px;
      }
    }
  }
  .all-count {
    width: 30%;
    margin-left: 27%;
    font-size: 14px;
    text-align: right;
    span {
      color: #165dff;
      font-size: 18px;
      font-weight: 600;
    }
  }
  .section-item + .section-item {
    margin-top: 16px;
  }
  .description-item {
    font-size: 14px;
    .description-item-label {
      color: var(--color-text-3);
    }
    .description-item-content {
      color: var(--color-text-1);
    }
  }
  .icon-tip {
    font-size: 16px;
    color: #165dffff;
    margin-left: 4px;
    vertical-align: middle;
  }
</style>
